<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_按键修饰符</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!--  enter键盘按键的别名  -->
<!--  <input type="text" @keyup.enter = 'output'>-->
<!--  双单词按键时 要中间加- -->
<!--  <input type="text" @keyup.caps-lock = 'output'>-->
<!--  tab 必须配合keydown去使用 要不然先触发默认效果就 换焦点了-->
<!--    <input type="text" @keydown.tab = 'output'>-->
<!--  当按键是 ctrl、alt、shift、meta(win) 时
      keyup 要配合其他 按键去使用
      keydown 正常使用
-->
  <input type="text" @keyup.ctrl = 'output'>
<!--    要求 同时 摁下crtl+y键 执行函数  直接在后面加就行 -->
<!--  <input type="text" @keyup.ctrl.y = 'output'>-->
<!--  <input type="text" @keyup.alt = 'output'>-->
<!--  <input type="text" @keyup.shift = 'output'>-->
<!--  <input type="text" @keyup.meta = 'output'>-->
<!--  总计配置键位-->
<!--  <input type="text" @keyup.huiche = 'output'>-->

</div>
  <script>
    Vue.config.productionTip = false;
    Vue.config.devtools = true;
    // 配置键位 自己配置
    Vue.config.keyCodes.huiche = 13;//不推荐
    const vm = new Vue({
      el:'#root',
      methods:{
          output(e) {
            //获取按键对应的值
            console.log(e.keyCode);
            console.log(e.target.value);
          }
      }
    });
  </script>
</body>
</html>